<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        :size="'default'"
        status-icon
    >
        <el-form-item label="功能名称" prop="label">
            <el-input v-model="formData.label" />
        </el-form-item>
        <el-form-item label="URL" prop="url">
            <el-input v-model="formData.url" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-debounce="submitForm">
                保存
            </el-button>
            <el-button type="primary" v-debounce="submitAndNewForm">
                保存并新增</el-button
            >
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup name="Action">
import { reactive, ref, onMounted } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import { ActionModel } from '@/common/types/model';
import { Request } from '@/app/request';
import { isNil, omit } from 'lodash';

const props = defineProps<{
    data?: ActionModel;
}>();
// const emit = defineEmits(['yh-newaction', 'yh-closedialog', 'yh-updateaction']);
const emit = defineEmits<{
    'create': [action: ActionModel];
    'update': [action: ActionModel];
    'close': [];
}>();

const formRef = ref<FormInstance>();
const formData = reactive<ActionModel>({});
onMounted(() => {
    if (isNil(props.data)) {
        Object.assign(formData, {
            id: 0,
            name: '',
            remark: '',
        });
    } else {
        Object.assign(formData, props.data);
    }
});

const rules = reactive<FormRules>({
    label: [{ required: true, message: '请输入功能名称', trigger: 'blur' }],
    url: [{ required: true, message: '请输入URL', trigger: 'blur' }],
});
const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return false;
    const validResult = await formEl.validate();
    if (validResult) {
        if (formData.id === 0) {
            // 新增
            const req = new Request('功能增加', omit(formData, ['id']));
            const r = await req.post();
            if (r.code > 100) {
                emit('create', r.obj as ActionModel);
                return true;
            }
        } else {
            // 修改
            const req = new Request('功能修改', formData);
            const r = await req.post();
            if (r.code > 100) {
                emit('update', formData);
                return true;
            }
        }
    } else {
        return false;
    }
};
const submitForm = async () => {
    const r = await save(formRef.value);
    if (r) {
        emit('close');
    }
};

const submitAndNewForm = async () => {
    const r = await save(formRef.value);
    if (r) {
        Object.assign(formData, {
            id: 0,
            label: '',
            url: '',
            remark: '',
        });
    }
};
</script>

<style lang="scss" scoped></style>
